// app/(auth)/user/login/page.tsx
'use client'

import { useState } from 'react'
import { useRouter } from 'next/navigation'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Checkbox } from '@/components/ui/checkbox'
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from '@/components/ui/card'
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
import { Separator } from '@/components/ui/separator'

export default function UserLogin() {
    const [email, setEmail] = useState('')
    const [password, setPassword] = useState('')
    const [rememberMe, setRememberMe] = useState(false)
    const [error, setError] = useState('')
    const router = useRouter()

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault()
        try {
            const result = { success: true, message: 'login success' }
            if (result.success) {
                router.push('/user/blog')
            } else {
                setError(result.message || '登录失败')
            }
        } catch {
            setError('系统错误，请稍后再试')
        }
    }

    return (
        <div className="min-h-screen bg-background flex flex-col  bg-red sm:px-6 lg:px-8">
            <div className="sm:mx-auto sm:w-full sm:max-w-md">
                <h2 className="mt-6 text-center text-3xl font-bold tracking-tight">
                    用户登录
                </h2>
                <p className="mt-2 text-center text-sm text-muted-foreground">
                    或{' '}
                    <Button variant="link" className="px-1 font-medium text-primary">
                        <a href="/register">立即注册</a>
                    </Button>
                </p>
            </div>

            <div className="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
                <Card className="shadow-sm">
                    <CardHeader>
                        <CardTitle className="text-xl">欢迎回来</CardTitle>
                        <CardDescription>请输入您的登录凭据</CardDescription>
                    </CardHeader>
                    <CardContent>
                        {error && (
                            <Alert variant="destructive" className="mb-4">
                                <AlertTitle>错误</AlertTitle>
                                <AlertDescription>{error}</AlertDescription>
                            </Alert>
                        )}

                        <form onSubmit={handleSubmit} className="space-y-4">
                            <div className="space-y-2">
                                <Label htmlFor="email">电子邮箱</Label>
                                <Input
                                    id="email"
                                    name="email"
                                    type="email"
                                    autoComplete="email"
                                    required
                                    value={email}
                                    onChange={(e) => setEmail(e.target.value)}
                                />
                            </div>

                            <div className="space-y-2">
                                <Label htmlFor="password">密码</Label>
                                <Input
                                    id="password"
                                    name="password"
                                    type="password"
                                    autoComplete="current-password"
                                    required
                                    value={password}
                                    onChange={(e) => setPassword(e.target.value)}
                                />
                            </div>

                            <div className="flex items-center justify-between">
                                <div className="flex items-center space-x-2">
                                    <Checkbox
                                        id="remember-me"
                                        checked={rememberMe}
                                        onCheckedChange={(checked) => setRememberMe(!!checked)}
                                    />
                                    <Label htmlFor="remember-me" className="text-sm font-medium leading-none">
                                        记住我
                                    </Label>
                                </div>

                                <Button variant="link" size="sm" className="px-0">
                                    <a href="/forgot-password">忘记密码?</a>
                                </Button>
                            </div>

                            <Button type="submit" className="w-full">
                                登录
                            </Button>
                        </form>

                        <div className="mt-6">
                            <div className="relative">
                                <div className="absolute inset-0 flex items-center">
                                    <Separator />
                                </div>
                                <div className="relative flex justify-center text-xs uppercase">
                  <span className="bg-background px-2 text-muted-foreground">
                    或使用以下方式登录
                  </span>
                                </div>
                            </div>

                            <div className="mt-6 grid grid-cols-2 gap-3">
                                <Button variant="outline" className="gap-2">
                                    <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M9.5 3.5a2 2 0 100 4 2 2 0 000-4zM9.5 9a6.5 6.5 0 100 13 6.5 6.5 0 000-13z" />
                                    </svg>
                                    微信
                                </Button>

                                <Button variant="outline" className="gap-2">
                                    <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
                                        <path d="M10 2a8 8 0 018 8 8 8 0 01-8 8 8 8 0 01-8-8 8 8 0 018-8zm0 14a6 6 0 100-12 6 6 0 000 12z" />
                                    </svg>
                                    Google
                                </Button>
                            </div>
                        </div>
                    </CardContent>
                </Card>
            </div>
        </div>
    )
}
